<template>
    <div class="home-swipe">
        <van-search v-model="search" placeholder="请输入搜索关键词" input-alig="center" @search="onSearch"/>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item in bannerData" :key="item.id">
                <!-- <img :src="item.picUrl" alt=""> -->
                <van-image :src="item.picUrl" lazy-load/>
            </van-swipe-item>

        </van-swipe>
    </div>
</template>
<script>
import { Toast } from 'vant';
// import axios from 'axios'
    export default {
        data() {
            return {
            search: '',
            bannerData:[]
            };
        },
        created(){
            this.getBanner()
        },
    methods: {
        onSearch(val) {
        Toast(val);
        },
        getBanner() {
            //     axios.get("/api/recommend/banner")
            //    .then(response=> {
            //       console.log(response);
            //       let resData = response.data;
            //       if(resData.result == 100){
            //           this.bannerData = resData.data;
            //       }
            //     })
        this.$request('get','/recommend/banner').then(res=>{
                console.log(res)
                if(res.result == 100){
                    this.bannerData = res.data;
                }
            })
        }
    }
}
</script>
<style scoped>
  /* .my-swipe img {
    /* color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed; */
    /* width: 80%;
    border-radius: 1rem;
  } */ 
</style>